<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        收集表单数据：
            若：<input type="text"/> ,则v-model收集的是value的值，用户输入的就是value值
                <input type="radio"/>,则v-model收集的是value的值，且要给标签配置value值
                <input type="checkbox"/>
                    1、没有配置input的value属性，那么收集的就是checked(勾选 or 不勾选，布尔值)
                    2、配置input的属性：
                        (1)v-model的值是非数组，那么收集的值就是checked(勾选 or 不勾选，布尔值)
                        (2)v-model的值是数组，那么收集的值就是value组成的数组

            备注：v-model的三个修饰符：
                lazy：失去焦点之后收集数据
                number获取的数据都是数字类型
                trim:对输入的数据首尾空格过滤
     -->
    <div id="root">
        <form @submit.prevent="demo">
            <!-- <label for="name">账号:</label>
            <input type="text" id="name"> -->
            <!-- v-model.trim:对输入的数据首尾空格过滤 -->
            账号:<input type="text" v-model.trim="userInfo.account"><br><br>
            密码:<input type="password" v-model="userInfo.password"><br><br>
            性别:
            男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
            女<input type="radio" name="sex" v-model="userInfo.sex" value="female"><br><br>
            <!-- v-model.number获取的数据都是数字类型 -->
            年龄: <input type="number" v-model.number="userInfo.age"><br><br>
            <!-- 多个复选框data中需要定义成数组形式，同时给v-model -->
            爱好:
            学习<input type="checkbox" v-model="userInfo.hobby" value="study">
            打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
            吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat"><br><br>
            所属校区
            <select v-model="userInfo.city">
                <option value="">请选择校区</option>
                <option value="longzihu">龙子湖校区</option>
                <option value="huayuan">花园校区</option>
                <option value="erqi">二七</option>
            </select><br><br>
            其他信息:
            <textarea name="" id="" cols="30" rows="10" v-model.lazy="userInfo.other"></textarea><br><br>
            <!-- v-model.lazy失去焦点之后收集数据 -->
            <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="https://www.baidu.com/">《用户协议》</a><br><br>
            <button>注册</button>
        </form>
    </div>

    <!-- 引入Vue -->
    <script src="../js/vue.js"></script>
    <script>
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
        new Vue({
            el:'#root',
            data:{
                userInfo:{
                    account:'',
                    password:'',
                    sex:'',
                    age:'',
                    hobby:[],
                    city:'',
                    other:'',
                    agree:''
                }
            },
            methods: {
                demo(){
                    console.log(JSON.stringify(this.userInfo))
                }
            },
        })
    </script>
</body>
</html>